<template>
  <div class="student-detail-container">
    <el-page-header @back="goBack" content="学生情绪分析详情" />

    <el-row :gutter="20" style="margin-top: 20px;">
      <!-- 学生基本信息 -->
      <el-col :span="8">
        <el-card shadow="never">
          <template #header>
            <div class="card-header">
              <span>学生基本信息</span>
            </div>
          </template>
          <el-descriptions :column="1" border>
            <el-descriptions-item label="学号">{{ studentInfo.studentId }}</el-descriptions-item>
            <el-descriptions-item label="姓名">{{ studentInfo.name }}</el-descriptions-item>
            <el-descriptions-item label="班级">{{ studentInfo.class }}</el-descriptions-item>
            <el-descriptions-item label="联系方式">{{ studentInfo.phone }}</el-descriptions-item>
            <el-descriptions-item label="班主任">{{ studentInfo.teacher }}</el-descriptions-item>
            <el-descriptions-item label="班主任联系方式">{{ studentInfo.teacherPhone }}</el-descriptions-item>
          </el-descriptions>
        </el-card>
      </el-col>

      <!-- 情绪分析图表 -->
      <el-col :span="16">
        <el-card shadow="never">
          <template #header>
            <div class="card-header">
              <span>情绪状态分析</span>
            </div>
          </template>
          <div class="chart-container">
            <!-- 这里放情绪扇形图 -->
            <div style="height: 400px; display: flex; justify-content: center; align-items: center; background-color: #f5f7fa;">
              <div style="text-align: center;">
                <p style="font-size: 18px; margin-bottom: 20px;">情绪分布扇形图</p>
                <div style="width: 300px; height: 300px; margin: 0 auto; background-color: #fff; border-radius: 50%;"></div>
              </div>
            </div>
          </div>
        </el-card>
      </el-col>
    </el-row>

    <!-- 情绪历史记录 -->
    <el-card shadow="never" style="margin-top: 20px;">
      <template #header>
        <div class="card-header">
          <span>情绪历史记录</span>
        </div>
      </template>
      <el-table :data="emotionHistory" border style="width: 100%">
        <el-table-column prop="date" label="日期" width="120" />
        <el-table-column prop="time" label="时间" width="120" />
        <el-table-column prop="emotion" label="情绪状态" width="120">
          <template #default="{ row }">
            <el-tag :type="getEmotionTagType(row.emotion)">
              {{ row.emotion }}
            </el-tag>
          </template>
        </el-table-column>
        <el-table-column prop="riskStatus" label="风险状态" width="120">
          <template #default="{ row }">
            <el-tag :type="getRiskTagType(row.riskStatus)">
              {{ getRiskText(row.riskStatus) }}
            </el-tag>
          </template>
        </el-table-column>
        <el-table-column prop="location" label="检测位置" />
        <el-table-column label="操作" width="120">
          <template #default>
            <el-button size="small" type="text">查看详情</el-button>
          </template>
        </el-table-column>
      </el-table>
    </el-card>
  </div>
</template>

<script setup>
import { ref, onMounted } from 'vue'
import { useRoute, useRouter } from 'vue-router'

const route = useRoute()
const router = useRouter()

const studentId = route.params.id

// 学生信息
const studentInfo = ref({
  studentId: studentId,
  name: '张三',
  class: '计算机1班',
  phone: '13800138001',
  teacher: '李老师',
  teacherPhone: '13800138002'
})

// 情绪历史记录
const emotionHistory = ref([
  {
    date: '2023-05-01',
    time: '09:30:22',
    emotion: 'happy',
    riskStatus: 'normal',
    location: '教学楼A栋201教室'
  },
  // 更多测试数据...
])

// 方法
const goBack = () => {
  router.go(-1)
}

const getEmotionTagType = (emotion) => {
  const map = {
    happy: 'success',
    sad: 'info',
    angry: 'danger',
    surprise: 'warning',
    fear: '',
    disgust: 'warning'
  }
  return map[emotion] || ''
}

const getRiskTagType = (riskStatus) => {
  const map = {
    normal: 'success',
    low: '',
    medium: 'warning',
    high: 'danger'
  }
  return map[riskStatus] || ''
}

const getRiskText = (riskStatus) => {
  const map = {
    normal: '正常',
    low: '低风险',
    medium: '中风险',
    high: '高风险'
  }
  return map[riskStatus] || ''
}

// 模拟API调用
onMounted(() => {
  // 实际项目中这里应该是API调用获取学生详情
})
</script>

<style scoped>
.student-detail-container {
  padding: 20px;
}

.card-header {
  font-size: 16px;
  font-weight: bold;
}

.chart-container {
  height: 400px;
}
</style>